<script setup lang="ts">
import { ref } from 'vue';

import ChildCardModal from './hand-card-status/components/ChildCardModal.vue';
import MergeCardsModal from './hand-card-status/components/MergeCardsModal.vue';
import ModifyStatusModal from './hand-card-status/components/ModifyStatusModal.vue';
import QuickOrderModal from './hand-card-status/components/QuickOrderModal.vue';
import QuickTransferModal from './hand-card-status/components/QuickTransferModal.vue';
import TeamCardModal from './hand-card-status/components/TeamCardModal.vue';

const modals = ref({
  childCard: false,
  teamCard: false,
  modifyStatus: false,
  quickOrder: false,
  quickTransfer: false,
  mergeCards: false,
});

const showChildCard = () => {
  modals.value.childCard = true;
};

const showTeamCard = () => {
  modals.value.teamCard = true;
};

const showModifyStatus = () => {
  modals.value.modifyStatus = true;
};

const showQuickOrder = () => {
  modals.value.quickOrder = true;
};

const showQuickTransfer = () => {
  modals.value.quickTransfer = true;
};

const showMergeCards = () => {
  modals.value.mergeCards = true;
};
</script>

<template>
  <div class="spa-demo">
    <div class="demo-header">
      <h1>温泉洗浴管理系统 - 手牌中心演示</h1>
      <p>
        这是一个基于 Vue 3 + TypeScript + Ant Design Vue 的温泉洗浴管理系统演示
      </p>
    </div>

    <div class="demo-content">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card title="系统功能" class="demo-card">
            <ul>
              <li>手牌网格显示 - 不同颜色代表不同状态</li>
              <li>筛选功能 - 全部/男宾/女宾筛选</li>
              <li>功能操作 - F1-F11快捷键操作</li>
              <li>搜索功能 - 手牌号搜索和快速开牌</li>
              <li>数据统计 - 实时统计和客流量</li>
              <li>模态框操作 - 各种业务操作</li>
            </ul>
          </a-card>
        </a-col>

        <a-col :span="12">
          <a-card title="技术特点" class="demo-card">
            <ul>
              <li>响应式设计 - 支持不同屏幕尺寸</li>
              <li>TypeScript - 完整的类型支持</li>
              <li>组件化开发 - 模块化设计</li>
              <li>状态管理 - 统一的状态管理</li>
              <li>API接口 - 完整的后端接口</li>
              <li>用户体验 - 流畅的交互体验</li>
            </ul>
          </a-card>
        </a-col>
      </a-row>

      <a-row :gutter="24" style="margin-top: 24px">
        <a-col :span="24">
          <a-card title="手牌状态说明" class="demo-card">
            <div class="status-demo">
              <div class="status-item">
                <div class="status-color idle"></div>
                <span>空闲</span>
              </div>
              <div class="status-item">
                <div class="status-color occupied"></div>
                <span>占用</span>
              </div>
              <div class="status-item">
                <div class="status-color pending"></div>
                <span>待查</span>
              </div>
              <div class="status-item">
                <div class="status-color disabled"></div>
                <span>禁用</span>
              </div>
              <div class="status-item">
                <div class="status-color selfUse"></div>
                <span>自用</span>
              </div>
              <div class="status-item">
                <div class="status-color overtime"></div>
                <span>超时</span>
              </div>
              <div class="status-item">
                <div class="status-color overLimit"></div>
                <span>超额</span>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <a-row :gutter="24" style="margin-top: 24px">
        <a-col :span="24">
          <a-card title="功能操作演示" class="demo-card">
            <div class="function-demo">
              <a-button type="primary" @click="showChildCard">
                儿童开牌
              </a-button>
              <a-button type="primary" @click="showTeamCard">团队开牌</a-button>
              <a-button type="primary" @click="showModifyStatus">
                修改状态
              </a-button>
              <a-button type="primary" @click="showQuickOrder">
                快速下单
              </a-button>
              <a-button type="primary" @click="showQuickTransfer">
                快速转账
              </a-button>
              <a-button type="primary" @click="showMergeCards">
                合并手牌
              </a-button>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 模态框组件 -->
    <ChildCardModal v-model:visible="modals.childCard" />
    <TeamCardModal v-model:visible="modals.teamCard" />
    <ModifyStatusModal v-model:visible="modals.modifyStatus" />
    <QuickOrderModal v-model:visible="modals.quickOrder" />
    <QuickTransferModal v-model:visible="modals.quickTransfer" />
    <MergeCardsModal v-model:visible="modals.mergeCards" />
  </div>
</template>

<style scoped>
.spa-demo {
  min-height: 100vh;
  padding: 24px;
  background: #f5f5f5;
}

.demo-header {
  margin-bottom: 32px;
  text-align: center;
}

.demo-header h1 {
  margin-bottom: 16px;
  color: #1890ff;
}

.demo-header p {
  font-size: 16px;
  color: #666;
}

.demo-card {
  height: 100%;
}

.status-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.status-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.status-color {
  width: 24px;
  height: 24px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.status-color.idle {
  background: #f0f0f0;
}

.status-color.occupied {
  background: #52c41a;
}

.status-color.pending {
  background: #ff4d4f;
}

.status-color.disabled {
  background: #722ed1;
}

.status-color.selfUse {
  background: #1890ff;
}

.status-color.overtime {
  background: #faad14;
}

.status-color.overLimit {
  background: #000;
}

.function-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>
